<template>
    <my-page>
        <div class="galInfo-root">
            <div class="galInfo-title box">
                <div class="text">
                    <section>NAME : </section>
                    <section>{{ curData.data.name }}</section>
                </div>
                <div class="text">
                    <section>CLUB : </section>
                    <section>{{ curData.data.club ? curData.data.club : "[这里是[ ]]" }}</section>
                </div>
                <div class="text">
                    <section>INDEX : </section>
                    <section>{{ curData.data.newIndex }}</section>
                </div>
                <div class="text-span">
                    <div v-if="curData.data.isCN == 1 || curData.data.isCN == 2" class="span-ok">{{ curData.isChTitle }}
                    </div>
                    <div v-else-if="curData.data.isCN == 4 || curData.data.isCN == 5 || curData.data.isCN == 6"
                        class="span-ok1">{{ curData.isChTitle }}</div>
                    <div v-else class="span-no">{{ curData.isChTitle }}</div>
                    <div :class='curData.data.bug ? "span-no" : "span-ok"'>BUG</div>
                    <div :class='curData.data.isCG == 0 ? "span-no" : "span-ok"'>CG</div>
                </div>
            </div>
            <div></div>
            <div class="galInfo-typeTags box">
                <TransitionGroup name="tagList">
                    <div v-for="(item, index) in tempTag" :key="index" class="type-tag" :class="getColor(item.curV)"
                        @click="tag_ClickEvent(item.id)">
                        {{ item.title }}
                    </div>

                    <div class="type-tag tag-colorB" @click="getTag_ClickEvent" v-if="isSetTagState == 0">SetUp</div>
                    <div class="type-tag tag-colorB" @click="addTag_ClickEvent" v-else>Update</div>
                </TransitionGroup>
            </div>
            <div class="galInfo-files box">
                <div v-for="(item, key, index) in curData.newFiles" :key="index" class="file-item-content">
                    <section>{{ key }}</section>
                    <div v-for="(citem, index) in item" :key="index" class="file-item">
                        <div>{{ citem.name }}</div>
                        <div>
                            <!-- <a @click="download_ClickEvent(index)">点我下载</a> -->
                            <a :href="'https://www.baidu.com' + citem.path" @click="download_ClickEvent(index)">点我下载</a>
                        </div>
                    </div>
                </div>
                <div class="files-title">
                    <span @click="upFilePath_ClickEvent">点击这里从浏览器打开文件列表</span>
                </div>
            </div>
        </div>
    </my-page>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useGalStores } from "@/stores/index.js"
import { getGal_API, getGalTagListOfType_API, addGalDownloadCount_API, addGalTag_API, } from "@/axios/api/gal.js";
import loadingManager from '@/manager/loadingManager.js'
import { baseURL } from '@/axios/request.js'

const galStores = useGalStores();

const curData = ref({
    data: {},
    tags: [],
    files: [],
    newFiles: {},
});
const tempTag = ref([]);
const isSetTagState = ref(0);

onMounted(() => {
    loadingManager.show();
    const id = router.currentRoute.value.query.id;
    if (id) {
        getGal_API({
            id: id,
        }).then(res => {
            console.log(res.data)
            curData.value = res.data;
            for (let i = 0; i < res.data.tags.length; i++) {
                const cur = res.data.tags[i];
                tempTag.value.push({
                    id: cur.tagId,
                    title: cur.title,
                    curV: 0,
                    isOld: 1,
                });
            }

            const files = res.data.files;
            const cur = {};
            for (let i = 0; i < files.length; i++) {
                const element = files[i];
                const name = element.name.substring(0, 5);
                const temp = element.path.replace(`\\GalGame\\${name.substring(0, 1)}\\${name}\\`, '').replace(element.name, '')
                const arr = temp.split('\\');

                if (arr.length >= 2) {
                    if (cur[arr[arr.length - 2]]) {
                        cur[arr[arr.length - 2]].push(element)
                    } else {
                        cur[arr[arr.length - 2]] = [element];
                    }
                } else {
                    if (cur.default) {
                        cur.default.push(element)
                    } else {
                        cur.default = [element];
                    }
                }
            }
            curData.value.newFiles = cur;
        }).catch(res => {
            console.log(res)
        }).finally(() => {
            loadingManager.hide();
        })
    }
})

//浏览器打开文件列表
const upFilePath_ClickEvent = () => {
    const url = baseURL + 'galgame/getfilePath?fileid=' + curData.value.data.id;
    window.open(url);
}

//获取全部的Tag
const getTag_ClickEvent = () => {
    getGalTagListOfType_API().then(res => {
        console.log(res.data)
        //进行一个判断
        const oldTags = tempTag.value;
        tempTag.value = [];
        tempTag.value = res.data;
        for (let i = 0; i < tempTag.value.length; i++) {
            const element = tempTag.value[i];

            if (oldTags.find(u => u.id == element.id)) {
                //0:未选择, 1:已拥有, 2:需要删除
                element.curV = 1;//判断值
                element.isOld = 1;//是否的已经有的值
            } else {
                element.curV = 0;//判断值
                element.isOld = 0;//是否的已经有的值
            }
        }
        isSetTagState.value = 1;
    }).catch(res => {
        console.log(res)
    })
}

//把选择的Tag全部上传
const addTag_ClickEvent = () => {
    isSetTagState.value = 0;
    //对比原值
    const curAddTags = [];
    const curDelTags = [];
    for (let i = 0; i < tempTag.value.length; i++) {
        const element = tempTag.value[i];
        if (element.curV == 1) {
            //需要添加的
            if (element.isOld == 0) {
                curAddTags.push(element.id);
            }
        } else if (element.curV == 0) {
            //没有选择的
        } else if (element.curV == 2) {
            //需要删除的
            if (element.isOld == 1) {
                curDelTags.push(element.id);
            }
        }
    }
    if (curAddTags.length <= 0 && curDelTags.length <= 0) {
        tempTag.value = [];
        for (let i = 0; i < curData.value.tags.length; i++) {
            const tag = curData.value.tags[i];
            tag.curV = 0;
            tag.isOld = 1;
            tempTag.value.push(tag);
        }
        return;
    }
    addGalTag_API({
        userId: 0,
        galId: curData.value.data.id,
        tagAddIds: curAddTags.toString(),
        tagDelIds: curDelTags.toString(),
    }).then(res => {
        console.log("UpdateTagOK", res);
        const temp = tempTag.value;
        tempTag.value = [];
        curData.value.tags = [];
        for (let i = 0; i < temp.length; i++) {
            if (temp[i].curV == 1) {
                temp[i].curV = 0;
                temp[i].isOld = 1;
                tempTag.value.push(temp[i]);
                //保存到元数据
                curData.value.tags.push({
                    tagId: temp[i].id,
                    title: temp[i].title,
                })

            }
        }
        console.log(tempTag.value)
    }).catch(res => {
        console.log("UpdateTagError", res);
        tempTag.value = [];
        for (let i = 0; i < curData.value.tags.length; i++) {
            const tag = curData.value.tags[i];
            tag.curV = 0;
            tag.isOld = 1;
            tempTag.value.push(tag);
        }
    }).finally(() => {
        console.log("UpdateTagOFF")
    })
}

const tag_ClickEvent = (id) => {
    if (isSetTagState.value != 1) {
        return;
    }
    const cur = tempTag.value.find(u => u.id == id);
    if (cur) {
        if (cur.curV == 0) {
            cur.curV = 1;
        } else if (cur.curV == 1) {
            if (cur.isOld == 0) {
                cur.curV = 0;
            } else {
                cur.curV = 2;
            }
        } else if (cur.curV == 2) {
            cur.curV = 1;
        }
    }
}

const getColor = (index) => {
    switch (index) {
        case 0:
            return "tag-colorB";
        case 1:
            return "tag-colorG";
        case 2:
            return "tag-colorR";
    }
}

//添加下载次数
const download_ClickEvent = (index) => {
    if (index == 0) {
        //加载下载量
        const { id } = curData.value.data;
        addGalDownloadCount_API({
            galId: id
        }).then(res => {
            if (res.status == 200) {
                console.log("添加下载量成功", res.data)
            }
        }).catch(res => {
            console.log(res)
        })
    }
}

</script>

<style scoped lang="scss">
.galInfo-root {

    .box {
        width: calc(90% - 10px);
        box-shadow: 0 0 10px -3px rgba(128, 128, 128, 1);
        border-radius: 5px;
        margin: 10px 5%;
        padding: 5px;
    }

    .galInfo-files {
        .files-title {
            display: flex;
            justify-content: center;
            color: rgba(128, 128, 128, 0.5);
            padding: 5px;
            padding-top: 20px;
        }

        .file-item-content {
            padding: 0px 10px;

            >section {
                font-size: 18px;
                font-weight: 900;
                padding: 5px 0px;
            }
        }

        .file-item:last-child {
            border-bottom: 1px solid rgba(128, 128, 128, 0.5);
        }

        .file-item {
            padding: 5px 10px;
            border-top: 1px solid rgba(128, 128, 128, 0.5);
            display: flex;
            justify-content: space-between;
        }
    }

    .galInfo-typeTags {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;

        .type-tag {
            color: white;
            padding: 3px 10px;
            margin: 3px;
            border-radius: 5px;
            transition-duration: 0.3s;
        }
    }

    .galInfo-title {

        .text {
            display: grid;
            grid-template-columns: 30% 20px 1fr;
            padding: 1px;

            >section {
                width: 100%;
                font-size: 20px;
            }

            >section:first-child {
                text-align: right;
                font-family: 900;
            }

            >section:last-child {
                grid-column: 3;
                font-family: 900;
            }
        }

        .text-span {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;

            >div {
                padding: 3px 10px;
                margin: 3px;
                color: white;
                border-radius: 5px;
            }

            .span-ok {
                background-color: #6BFF74;
            }

            .span-ok1 {
                background-color: #e6a23c;
            }

            .span-no {
                background-color: #FF466B;
            }
        }

    }

    .tag-colorR {
        background-color: #FF466B;
    }

    .tag-colorG {
        background-color: #67c23a;
    }

    .tag-colorB {
        background: #409eff;
    }

    .tag-colorY {
        background-color: #e6a23c;
    }

    .tagList-enter-active,
    .tagList-leave-active {
        transition: all 0.5s ease;
    }

    .tagList-enter-from,
    .tagList-leave-to {
        opacity: 0;
        // transform: translateX(30px);
    }
}
</style>